<!DOCTYPE html>
<html>
<head>
  <title>实时数据看板</title>
  <style>
    .container {
      max-width: 1500px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    
    .block {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      padding: 15px;
      height: 300px;
      position: relative;

      
    }

        /* 悬停效果 */
    .block:hover {
        transform: translateY(-5px);
        cursor: pointer;
        transition: transform 0.3s ease; 
    }
  
    /* 放大状态 */
    .block:focus {
    transform: scale(3) translateZ(0) ;
    /* transform: ; */
    z-index: 999;
    position: fixed;
    top: 35%;
    left: 40%;
    margin: 0 !important;
    cursor: default;
    outline: none;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.8);
    }
    /* 遮罩层点击关闭支持 */
    .block:focus::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: auto; /* 允许点击遮罩层 */
    }
        /* 拖动时的光标状态 */
    .block.zoomed:active {
    cursor: grabbing;
    }
    .chart-container {
      width: 100%;
      height: 100%;
    }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    
    /* 渐变背景（默认配色） */
    background: linear-gradient(
      to right, 
      #f0f4c3,   /* 柔黄 */
      #032e84,  /* 淡紫 */
      #07618e  /* 浅青 */
    );
    
    /* 平滑过渡效果 */
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
  }
  .title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
  }
  </style>
</head>
<body>
  <h1 class="title">数据可视化图表1</h1>
  <div class="container">
    <div class="grid" id="dashboard-grid">
      <!-- 动态生成12个图表区块 -->
      <template id="block-template">
        <div class="block">
          <div class="chart-container">
            <canvas class="chart"></canvas>
          </div>
          <div class="data-info"></div>
        </div>
      </template>
    </div>
  </div>

  <!-- 使用Chart.js库 -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>

    document.addEventListener('DOMContentLoaded', () => {
  // 获取所有区块元素
  const blocks = document.querySelectorAll('.block');
  
  // 点击放大逻辑
  blocks.forEach(block => {
    // 添加可聚焦属性
    block.tabIndex = 0;

    // 点击放大
    block.addEventListener('click', (e) => {
      if (!block.classList.contains('zoomed')) {
        document.body.classList.add('block-active');
        block.classList.add('zoomed');
        block.focus();
      }
    });

    // 双击恢复
    block.addEventListener('dblclick', (e) => {
      document.body.classList.remove('block-active');
      block.classList.remove('zoomed');
      block.blur();
    });

    // ESC键恢复
    block.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        document.body.classList.remove('block-active');
        block.classList.remove('zoomed');
        block.blur();
      }
    });

    // 失焦恢复
    block.addEventListener('blur', () => {
      document.body.classList.remove('block-active');
      block.classList.remove('zoomed');
    });
  });
});




// 初始化所有图表
const charts = [];
const grid = document.getElementById('dashboard-grid');
const template = document.getElementById('block-template');

// 创建12个图表区块
for (let i = 0; i < 12; i++) {
  const clone = template.content.cloneNode(true);
  const block = clone.querySelector('.block');
  const canvas = clone.querySelector('.chart');
  const infoDiv = clone.querySelector('.data-info');
  
  // 设置唯一ID
  block.dataset.id = `block-${i}`;
  canvas.id = `chart-${i}`;
  
  // 添加到网格
  grid.appendChild(clone);
  
  // 初始化图表
  const ctx = canvas.getContext('2d');
  const chart = new Chart(ctx, {
    type: 'line', // 默认折线图
    data: {
      labels: [],
      datasets: [{
        label: `数据流 ${i+1}`,
        data: [],
        borderColor: getScientificColor(),
        tension: 0.1,
        fill: false
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false }
      }
    }
  });
  
  charts.push({
    chart: chart,
    info: infoDiv,
    lastUpdate: new Date()
  });
}


// 颜色生成函数
function getRandomColor() {
return `hsl(${Math.random() * 360}, 70%, 60%)`;
}

function getScientificColor() {
  // 使用动态扰动黄金比例算法
  const baseHue = Math.random() * 360;
  const hueDrift = (Math.random() - 0.5) * 45; // ±22.5度扰动
  const hue = (baseHue + hueDrift) % 360;

  // 模拟自然界光照变化的S曲线
  const saturation = 45 + Math.random()**1.5 * 15; // 45-60%衰减分布
  const lightness = 65 + Math.sin(Math.random() * Math.PI) * 10; // 65-75%正弦分布

  return `hsl(
    ${hue.toFixed(1)},
    ${saturation.toFixed(1)}%,
    ${lightness.toFixed(1)}%
  )`;
}

  
   
// WebSocket连接
const socket = new WebSocket('ws://your-backend-endpoint/realtime');

socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  
  // 更新对应图表
  if (data.blockId >= 0 && data.blockId < charts.length) {
    const chartObj = charts[data.blockId];
    const chart = chartObj.chart;
    
    // 添加新数据点
    chart.data.labels.push(new Date().toLocaleTimeString());
    chart.data.datasets[0].data.push(data.value);
    
    // 限制显示数据量
    if (chart.data.labels.length > 20) {
      chart.data.labels.shift();
      chart.data.datasets[0].data.shift();
    }
    
    // 更新图表
    chart.update();
    
    // 显示元信息
    chartObj.info.innerHTML = `
      <p>当前值: <strong>${data.value.toFixed(2)}</strong>   更新时间: ${new Date().toLocaleString()}</p>
      <p></p>
    `;
    chartObj.lastUpdate = new Date();
  }
};


// 模拟数据（开发用）
function mockData() {
  setInterval(() => {
    charts.forEach((chartObj, index) => {
      const value = Math.random() * 100;
      const event = {
        data: JSON.stringify({
          blockId: index,
          value: value,
          timestamp: new Date().getTime()
        })
      };
      socket.onmessage(event);
    });
  }, 2000);
}
   
// 开发时取消注释
mockData();
  </script>
</body>
</html>
